import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Modal,
  Platform,
  TouchableNativeFeedback,
  TouchableWithoutFeedback,
  TouchableOpacity,
} from 'react-native';
import {getRealSize} from '../utils';
import ThemeStyles from '../styles';
import PropTypes from 'prop-types';
import {I18n} from '../reducers/intl';

const Touchable =
  Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;

export const DialogMode = {
  confirm: 'confirm',
  info: 'info',
};

export default class ConfirmDialog extends React.Component {
  static propTypes = {
    styles: PropTypes.object,
    visible: PropTypes.bool,
    title: PropTypes.string,
    content: PropTypes.string,
    cancelLabel: PropTypes.string,
    okLabel: PropTypes.string,
    mode: PropTypes.string,
    onConfirm: PropTypes.func,
    onClose: PropTypes.func,
  };
  static defaultProps = {
    styles: {},
    visible: false,
    cancelLabel: I18n.t('button.close'),
    okLabel: I18n.t('button.apply'),
    title: null,
    content: '',
    mode: DialogMode.info,
    onConfirm: () => {},
  };

  state = {
    value: null,
  };

  onClose = () => {
    this.props.onClose();
  };

  onOk = () => {
    const {mode, onConfirm} = this.props;
    if (mode === DialogMode.confirm && onConfirm) {
      onConfirm();
    }
    this.onClose();
  };

  render() {
    const {visible, title, content, mode, cancelLabel, okLabel} = this.props;
    return (
      <Modal animationType="fade" visible={visible} transparent={true}>
        <TouchableWithoutFeedback onPress={this.onClose}>
          <View style={Styles.mask} />
        </TouchableWithoutFeedback>
        <View style={Styles.middle}>
          <TouchableWithoutFeedback onPress={this.onClose}>
            <View style={Styles.mask} />
          </TouchableWithoutFeedback>
          <View style={Styles.background}>
            <View style={Styles.container}>
              {title && <Text style={Styles.title}>{title}</Text>}
              <Text style={Styles.content}>{content}</Text>
              <View style={Styles.actions}>
                <Touchable onPress={this.onClose} style={{flex: 1}}>
                  <Text style={Styles.button}>{cancelLabel}</Text>
                </Touchable>
                {mode === DialogMode.confirm && (
                  <Touchable style={{flex: 1}} onPress={this.onOk}>
                    <Text style={Styles.button}>{okLabel}</Text>
                  </Touchable>
                )}
              </View>
            </View>
          </View>
          <TouchableWithoutFeedback onPress={this.onClose}>
            <View style={Styles.mask} />
          </TouchableWithoutFeedback>
        </View>
        <TouchableWithoutFeedback onPress={this.onClose}>
          <View style={Styles.mask} />
        </TouchableWithoutFeedback>
      </Modal>
    );
  }
}

const Styles = StyleSheet.create({
  mask: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0, 0.6)',
  },
  middle: {
    flexDirection: 'row',
  },
  background: {
    backgroundColor: 'rgba(0,0,0, 0.6)',
  },
  container: {
    width: getRealSize(288),
    borderRadius: getRealSize(8),
    backgroundColor: '#fff',
  },
  input: {
    backgroundColor: '#F6F6F6',
    margin: getRealSize(8),
    borderRadius: getRealSize(4),
    borderWidth: 1,
    borderColor: '#F6F6F6',
  },
  title: {
    fontSize: getRealSize(18),
    fontWeight: 'bold',
    paddingHorizontal: getRealSize(12),
    paddingTop: getRealSize(8),
  },
  actions: {
    flexDirection: 'row',
    borderTopColor: '#F6F6F6',
    borderTopWidth: 1,
    height: getRealSize(48),
    alignItems: 'center',
  },
  content: {
    marginTop: getRealSize(15),
    paddingVertical: getRealSize(8),
    fontSize: getRealSize(16),
    paddingHorizontal: getRealSize(15),
  },
  button: {
    flex: 1,
    textAlign: 'center',
    fontSize: getRealSize(16),
    color: ThemeStyles.Color.primary.color,
    paddingVertical: getRealSize(8),
  },
  separator: {},
});
